<template>
    <div class="Classroom">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">恒华出行宝课堂</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
            <div slot="right">
                <i class="weui-icon-search"></i>
            </div>
        </x-header>
        <checker class="classroom__checker" default-item-class="common__itemmessage" selected-item-class="common__item-selectedmessage common__color--DefaultTheme">
            <checker-item class="grid-center" :value="item" v-for="(item, index) in items1" :key="index">{{item.value}}</checker-item>
        </checker>

        <div class="weui-panel weui-panel_access">
            <!---->
            <div class="weui-panel__bd">
                <a href="#!/component/cell" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="~assets/x3/120-90.png" alt="" class="weui-media-box__thumb"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">个人资金账户安全</h4>
                        <p class="weui-media-box__desc">个人资金账户安全是一款为个人账户资金风险如密码被盗银行卡个人资金账户安全是一款为个人账户资金风险如密码被盗银行卡个人资金账户安全是一款为个人账户资金风险如密码被盗银行卡个人资金账户安全是一款为个人账户资金风险如密码被盗银行卡</p>
                        <p class="classroom__list--footer">1.0万阅读数 6评论</p>
                    </div>
                </a>
                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="~assets/x3/120-90.png" alt="" class="weui-media-box__thumb"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">标题二</h4>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                        <p class="classroom__list--footer">1.0万阅读数 6评论</p>
                    </div>
                </a>
            </div>
            <div class="weui-panel__ft">
                <a class="weui-cell weui-cell_access weui-cell_link">
                    <div class="weui-cell__bd">查看更多</div>
                </a>
            </div>
        </div>

    </div>
</template>

<script>
import { XHeader, XButton, Group, Cell, ButtonTab, ButtonTabItem, Panel, Radio, Checker, CheckerItem } from 'vux'
import { mapState, mapActions } from "vuex";
export default {
    components: { XHeader, XButton, Group, Cell, ButtonTab, ButtonTabItem, Panel, Radio, Checker, CheckerItem },
    computed: mapState({
        isWeChar: "isWeChar"
    }),
    data() {
        return {
            type: '1',
            items1: [{
                key: '1',
                value: '全部'
            }, {
                key: '2',
                value: '推荐'
            }, {
                key: '3',
                value: '承保'
            }, {
                key: '4',
                value: '理赔'
            }, {
                key: '5',
                value: '旅游险'
            }, {
                key: '6',
                value: '车险'
            }],
        }
    },
    methods: {
        goBack() {
            this.$common.goBack(this);
        }
    },
    mounted() {
        document.title = "恒华出行宝课堂";
        let _this = this;
        this.$init.subPageInit(this);

    },

}
</script>



<style lang="scss">
.classroom__checker {
  background-color: #fff;
  padding: 7px 4%;
}

.weui-media-box__hd {
  width: 120px !important;
  height: 90px !important;
}

.weui-media-box__bd {
  height: 90px !important;
}

.weui-media-box__title {
  font-size: 15px !important;
}

.weui-media-box__desc {
  margin-top: 6px !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
  color: #666666 !important;
}

.classroom__list--footer {
  margin-top: 6px !important;
  font-size: 10px;
  color: #b2b2b2;
}
</style>

